<template>
  <div>
    <el-dialog v-model="spaceStore.$state.updateDialogShow" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
         <div class="my-header">
          <h5 :id="titleId" :class="titleClass">修改停车位</h5>
          <el-icon class="el-icon--left" @click="close"><CloseBold /></el-icon>   
      </div>
    </template>
    <el-form :rules="rules" ref="ruleFormRef" :model="formInline">
    <el-form-item label="所属区域:" prop="area">
      <el-select v-model="formInline.region" placeholder="省">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
      <el-select v-model="formInline.region" placeholder="市">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
      <el-select v-model="formInline.region" placeholder="区">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>

    <el-form-item label="所属道路:" prop="road">
      <el-select v-model="formInline.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="所属停车场:" prop="parking">
      <el-select v-model="formInline.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="停车场编号:" prop="parkingId">
      <el-input v-model="formInline.id" />
    </el-form-item>
    <el-form-item label="停车位属性:" prop="open">
      <el-switch
    v-model="open"
    class="mb-2"
    active-text="启用"
    inactive-text="未启用"
  />
    </el-form-item>
    <br>
    <el-button type="success" @click="updateSubmit()" >提交</el-button>
    <el-button type="success" @click="resetForm()" >重置</el-button>
  </el-form>
  </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import {updateParkingSpace} from '@a/index'
import useSpaceStore from '@s/ParkingSpace'
import { useRouter } from 'vue-router';
import { ElMessage, rowContextKey } from 'element-plus';
import { number } from 'echarts';

const props = defineProps({
  //  获取数据
    index:Number,
    row: Object ,

})
const router = useRouter()


const spaceStore = useSpaceStore()
const open = ref(true)

const formInline = reactive({
  id: '',
  region: '',
})
// 校验规则
const rules = reactive({
  area: [
    {
      required: true,
      message: '必填',
      trigger: 'blur'
    }
  ],
  road: [
    {
      required: true,
      message: '必填',
      trigger: 'blur'
    }
  ],
  parking: [
    {
      required: true,
      message: '必填',
      trigger: 'blur'
    }
  ],
  parkingId: [
    {
      required: true,
      message: '必填',
      trigger: 'blur'
    }
  ],
  open: [
    {
      required: true,
      message: '必填',
      trigger: 'blur'
    }
  ]
})


 const updateSubmit = () => {
  updateParkingSpace().then(res => {
        console.log(res);
        if( res.data.code === 200){
          
      // 提示信息
      ElMessage({
        type:'success',
        message: res.data.msg,
        duration: 2000,
        onClose:() => {
          router.go(0)
        }
      })
    }else{
      ElMessage({
        type:'error',
        message: res.data.msg,
        duration: 2000,
        
      })
    }
        
    })

}
const ruleFormRef = ref(null)
const resetForm = () => {
  // ruleFormRef.value.resetFields()
}
</script>

<style scoped lang="scss">
:deep .el-dialog__header{
  background-color: #F4F4F4;
  padding: 10px;
  margin: 0;
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
 .el-icon--left{
  color: #acaaaa;
 }
}
.el-switch{
  --el-switch-on-color:#00E266
} 
:deep .el-button{
  margin: 10px auto;
}
</style>